<template>
   <div>
  <h2>用户登录</h2>
   <el-form class="loginForm"
           :model="loginForm"
           :rules="rules"
           >
     <el-form-item prop="username">
       <el-input type="text" v-model="loginForm.username"  style="width: 220px" placeholder="请输入用户名"></el-input>
     </el-form-item>
     <el-form-item prop="password">
       <el-input type="password"  v-model="loginForm.password" style="width: 220px" placeholder="请输入密码"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="loginHandler">登录</el-button>
     </el-form-item>
<!--     <el-form-item prop="code">-->
<!--       <el-input type="text"  style="width: 220px" placeholder="请输入验证码"></el-input>-->
<!--       <el-image :src="captchaImg" class="captchaImg" title="看不清，换一张"></el-image>-->
<!--     </el-form-item>-->
   </el-form>
   </div>
</template>

<script setup>
  import { ref } from 'vue'
  import {login} from '../api/user.js'
  import {ElMessage} from "element-plus";

  const captchaImg = ref('')  
  const loginForm = ref({
     username: 'admin',
     password: '',
  })

  function loginHandler() {

    console.log(loginForm.value);

    login(loginForm.value).then(response=>{
       if(response.data.flag){
          localStorage.setItem('token',response.data.token);
          // localStorage.setItem('user',JSON.stringify(response.data.user));
          // localStorage.setItem('roles',JSON.stringify(response.data.roles));
          // localStorage.setItem('permissions',JSON.stringify(response.data.permissions));
          this.$router.push('/');
          ElMessage.success('登录成功');
       }else{
          ElMessage.error('登录失败');
       }
    })
  }


  const rules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ]
  }
</script>

<style scoped>
.loginForm{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 15px 35px 15px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  box-shadow: 0 0 25px #caeaea;
}
.captchaImg {
  float: right;
  margin-left: 8px;
  border-radius: 4px;
}
</style>